<template>
	<view
		class="wrap-date-screen flex"
		:style="'top:' + navigationHeight + 'px;'"
	>
		<view
			class="date-item flex align-center just-center f-28"
			:class="{ activeColor: chooseIndex === 0 }"
			@click="onCurrentMonth"
		>
			当月
		</view>

		<view
			class="date-item flex align-center just-center f-28"
			@click="onDateScreen"
		>
			<view :class="{ active: chooseIndex === 1 }"> 日期筛选</view>

			<image
				v-if="chooseIndex === 1"
				class="arrow"
				:class="{ 'arrow-trans': isShow }"
				:src="getImageURL('technician/mine/arrow_down_theme.png')"
			/>

			<image
				v-else
				class="arrow"
				:src="getImageURL('technician/mine/arrow_down.png')"
				:class="{ 'arrow-trans': isShow }"
			/>
		</view>

		<view
			:style="'top: calc(' + navigationHeight + 'px + 88rpx);'"
			class="date-pop"
			@touchmove.stop.prevent
			v-show="isShow"
			@click.stop="onDismiss"
		>
			<view class="pop-white" @click.stop="onStop($event)">
				<view class="start-end flex">
					<picker
						mode="date"
						@change="onDateChange('start', $event)"
						:value="start_date === '' ? end_date : start_date"
						:start="$filters.getStartDate(end_date)"
						:end="end_date"
					>
						<view class="item flex column align-center just-center">
							<view class="title f-28"> 开始时间 </view>

							<view
								class="sub-title f-28"
								:class="{ activeColor: start_date !== '' }"
							>
								{{
									start_date === "" ? "开始时间" : start_date
								}}
							</view>
						</view>
					</picker>

					<picker
						mode="date"
						:start="start_date"
						@change="onDateChange('end', $event)"
						:value="end_date === '' ? start_date : end_date"
						:end="$filters.getEndDate(start_date)"
					>
						<view class="item flex column align-center just-center">
							<view class="title f-28"> 结束时间 </view>

							<view
								class="sub-title f-28"
								:class="{ activeColor: end_date !== '' }"
							>
								{{ end_date === "" ? "结束时间" : end_date }}
							</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const scrrenMaxMonth = 3;
	export default {
		props: {},
		data() {
			return {
				navigationHeight: this.$navigationHeight,

				isShow: false,

				chooseIndex: 0,

				start_date: "",
				end_date: "",
			};
		},
		mounted() {},
		methods: {
			/**
			 * 当月
			 */
			onCurrentMonth() {
				this.onDismiss();
				this.chooseIndex = 0;
				this.start_date = "";
				this.end_date = "";
			},
			/**
			 * 日期筛选
			 */
			onDateScreen() {
				this.chooseIndex = 1;
				this.isShow = !this.isShow;
			},
			/**
			 * 关闭日期筛选
			 */
			onDismiss() {
				this.isShow = false;
			},

			/**
			 * 拦截点击事件
			 */
			onStop(e) {
				e.stopPropagation();
			},
			/**
			 * 选择时间
			 */
			onDateChange(type, e) {
				const date = e.detail.value;
				if (type === "start") {
					this.start_date = date;
				} else if (type === "end") {
					this.end_date = date;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-date-screen {
		position: sticky;
		left: 0;
		width: 100%;
		height: 88rpx;
		z-index: 10;
		flex-wrap: wrap;
		overflow: hidden;
		background-color: white;

		.date-item {
			flex: 1;
			height: 88rpx;
			color: $title-color;
			overflow: hidden;

			.arrow {
				margin-left: 10rpx;
				width: 20rpx;
				height: 12rpx;
			}

			.arrow-trans {
				transform: rotate(180deg);
			}
		}
	}

	.date-pop {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);

		.pop-white {
			width: 100%;
			border-top: 2rpx solid #e8e8e8;
			background-color: white;

			.start-end {
				width: 100%;
				height: 110rpx;
				flex-wrap: wrap;

				.item {
					width: 375rpx;
					height: 110rpx;

					.title {
						color: $title-color;
					}
					.sub-title {
						margin-top: 15rpx;
						color: #b0b0b0;
					}
				}
			}
		}
	}
</style>
